<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (ev) {
            var imgEle = document.getElementById("my_img");
            var imgDescArr = [
                ["1", "第一张图片"],
                ["2", "第二张图片"],
                ["3", "第三张图片"]
            ];

            var count = 0;
            function loadNextImage() {
                console.log("loadNextImage().................");
                count++;
                if(count === imgDescArr.length){
                    count = 0;
                }
                var image = new Image();
                image.onload = function (ev1) {
                    imgEle.src = image.src;
                    imgEle.alt = imgDescArr[count][1];
                    imgEle.width = image.width;
                    imgEle.height = image.height;
                };
                image.src = "../../imgs/" + imgDescArr[count][0] + ".jpg";
            }

            setInterval(loadNextImage, 3000);

        }
    </script>

</head>


<body>
    <img id="my_img" src="../../imgs/1.jpg" alt=""/>
</body>
</html>